<template>
  <el-cascader ref="cascader" v-if="visiable" :value="propsValue" :show-all-levels="true" @change="cascaderChange"
    :props="cascader_props" :placeholder="$tt('tip_please_select_region')" filterable clearable ></el-cascader>
</template>
<script>
//省份和城市名称一样时 插件会识别不了 加上 @@ 区分
export default {
  props: {
    countryCode: {
      type: String,
      default: null,
    },
    // 特殊接口
    url: {
      type: String,
      default: null,
    },
    province: {
      type: String,
      default: null,
    },
    city: {
      type: String,
      default: null,
    },
    county: {
      type: String,
      default: null,
    },
    zipCode: {
      type: String,
      default: null,
    },
    checkStrictly: false,
    disabledItemCall: null,
    level: {
      type: Number,
      default: 3,
    },
  },
  data() {
    return {
      loading: false,
      cascader_props: {
        lazy: true,
        emitPath: true,
        checkStrictly: this.checkStrictly,
        lazyLoad: this.cascaderLoad
      },
      visiable: true,
      notUpdata: false,
    }
  },
  watch: {
    checkStrictly: function (newVal, oldVal) {
      this.cascader_props.checkStrictly = newVal
    },
    propsValue: {
      handler(newV, oldV) {
        if (!this.notUpdata) {
          this.visiable = false
          this.$nextTick(() => {
            this.visiable = true
          })
        }
      },
      immediate: true
    }

  },
  computed: {
    propsValue() {
      let out = []
      if (this.countryCode) out.push(this.countryCode)
      if (this.province && this.level >= 1) out.push(this.province + '@@')
      if (this.city && this.level >= 2) out.push(this.city)
      if (this.county && this.level >= 3) out.push(this.county)
      return out
    },
  },

  methods: {

    getProps() {
      return {
        lazy: true, emitPath: true,
        checkStrictly: this.checkStrictly,
      }
    },
    cascaderChange(e) {
      this.notUpdata = true
      const value = JSON.parse(JSON.stringify(e))
      if (value[1]) {
        value[1] = e[1].replace('@@', '')
      }
      this.$emit('input', value)
      this.$emit('change', value)

      this.$nextTick(() => {
        if (this.$refs.cascader) {
          const node = this.$refs.cascader.getCheckedNodes();
          if (_.isEmpty(node)) return
          const nodePath = _.head(node).pathNodes;

          if (nodePath) {
            this.$emit(
              "update:countryCode", nodePath.length >= 1 ? nodePath[0].data.value : null,
            );
            this.$emit(
              "update:countryName", nodePath.length >= 1 ? nodePath[0].data.name : null,
            );
            this.$emit(
              "update:province", nodePath.length >= 2 ? nodePath[1].data.value.replace('@@', '') : null,
            );
            this.$emit(
              "update:city", nodePath.length >= 3 ? nodePath[2].data.value : null,
            );
            this.$emit(
              "update:county", nodePath.length >= 4 ? nodePath[3].data.value : null,
            );
            this.$emit(
              "update:zipCode", nodePath[nodePath.length - 1].data.zipCode ? nodePath[nodePath.length - 1].data.zipCode : null,
            );


            if (this.checkStrictly) {
              this.$emit(
                "update:regionId", _.last(nodePath) ? _.last(nodePath).data.regionId : null,
              );
            } else {
              this.$emit(
                "update:regionId", nodePath.length >= 4 ? nodePath[3].data.regionId : null,
              );
            }

          }
        }
      })

    },
    cascaderLoad(node, resolve) {

      const { level, path } = node;
      let data = {}
      if (level == 0) {
        this.$ajax({
          url: this.url || "/tms-api/base/TmsPlaceInfoRpc/selectCountry.json",
          method: 'post',
          tip: false,
          success: (res) => {
            if (res.data && res.data.rows) {
              resolve(res.data.rows.map(it => {
                return {
                  label: this.$formatNameCode(it.countryName, it.countryCode),
                  value: it.countryCode,
                  name: it.countryName,
                  disabled: this.disabledItemCall && this.disabledItemCall(it, level, path),
                  leaf: false
                }
              }));
            }
          },
          complete: () => {
          }
        })
        return
      }

      if (path.length > 0) data.countryCode = path[0]
      if (path.length > 1) data.provDistCd = path[1].replace('@@', '')
      if (path.length > 2) data.cityDistCd = path[2]
      this.$ajax({
        url: "/tms-api/base/TmsPlaceInfoRpc/selectAddressLabelDTO.json",
        method: 'post',
        data,
        tip: false,
        success: (res) => {
          if (res.data && res.data.rows) {

            resolve(res.data.rows.map(it => {
              let item = { value: level === 1 ? it.address + '@@' : it.address }
              if (it.zipCode) {
                item.label = this.$formatNameCode(it.address, it.zipCode)
                item.zipCode = it.zipCode
                item.leaf = level >= this.level || it.isLeaf == 'Y'
              } else {
                item.label = it.address
                item.leaf = level >= this.level || it.isLeaf == 'Y'
              }
              item.disabled = this.disabledItemCall && this.disabledItemCall(it, level, path),
                item.regionId = it.regionId
              return item
            }));
          }
        },
        fail: () => {
          resolve([])
        },
        complete: () => {
        }
      })
    },
  }
}
</script>
